<template>
  <Tabs v-model:activeKey="activeKey" class="di-tab">
    <TabPane v-for="(item, i) in value" :key="i" :tab="item.label">
      <component
        :is="DiFormContext.getItemWidget(f)"
        v-for="f in field.children"
        :field="f"
        :key="f.prop"
        :path="path.concat([i]).concat(f.type == 'layout' ? [] : f.prop)"
      />
    </TabPane>
  </Tabs>
</template>
<script setup lang="ts">
import { TabPane, Tabs } from 'ant-design-vue';
import { inject, onMounted, ref } from 'vue';
withDefaults(defineProps<{ field: any; display?: boolean; path: Array<string | number> }>(), {});

const activeKey = ref(0);
const value = defineModel<any[]>('value', { default: () => [] });
const DiFormContext: any = inject('DiFormContext');
onMounted(() => {
  if (value.value.length == 0) {
    value.value = [{}];
  }
});
</script>
<style lang="scss">
.di-tab.css-dev-only-do-not-override-1o0fg0k.ant-tabs > .ant-tabs-nav {
  margin-left: var(--form-gap) !important;
}
</style>
